<template>
	<view class="app-classify-page-two-classify-list">
		<e-skeleton :show="hasLoading" :fixed="false">
			<view class="app-classify-page-two-classify-list__item bg-white e-radius-20 e-m-b-20" v-for="item in 3" :key="item">
				<view class="e-flex">
					<e-skeleton-item variant="block">
						<view class="app-classify-page-two-classify-list__skeleton-title"></view>
					</e-skeleton-item>
				</view>
				<view class="e-flex e-p-t-30" v-for="items in 2" :key="items">
					<view class="e-m-r-30">
						<view class="e-radius-20 overflow-hidd e-m-b-10">
							<e-skeleton-item variant="block">
								<view class="app-classify-page-two-classify-list__skeleton-img"></view>
							</e-skeleton-item>
						</view>
						<view class="e-flex-xy-center">
							<e-skeleton-item variant="block">
								<view class="app-classify-page-two-classify-list__skeleton-txt"></view>
							</e-skeleton-item>
						</view>
					</view>
					<view class="e-m-r-30">
						<view class="e-radius-20 overflow-hidd e-m-b-10">
							<e-skeleton-item variant="block">
								<view class="app-classify-page-two-classify-list__skeleton-img"></view>
							</e-skeleton-item>
						</view>
						<view class="e-flex-xy-center">
							<e-skeleton-item variant="block">
								<view class="app-classify-page-two-classify-list__skeleton-txt"></view>
							</e-skeleton-item>
						</view>
					</view>
					<view>
						<view class="e-radius-20 overflow-hidd e-m-b-10">
							<e-skeleton-item variant="block">
								<view class="app-classify-page-two-classify-list__skeleton-img"></view>
							</e-skeleton-item>
						</view>
						<view class="e-flex-xy-center">
							<e-skeleton-item variant="block">
								<view class="app-classify-page-two-classify-list__skeleton-txt"></view>
							</e-skeleton-item>
						</view>
					</view>
				</view>
			</view>
		</e-skeleton>
		<scroll-view scroll-y  v-show="!hasLoading">
			
			<view class="app-classify-page-two-classify-list__item  bg-white e-radius-20 e-m-b-20" v-for="item, in twoClassifyList" :key="item.id">
				<view>
					<text class="fw-600 ">{{ item.name }}</text>
				</view>
				<view class=" e-flex e-flex-wrap">
					<view class="app-classify-page-two-classify-list__item-child e-p-t-30" v-for="items in item.children" :key="items.id">
						<view class="e-m-b-10 e-flex-xy-center">
							<load-image mode="aspectFill" radius="20rpx" size="142rpx" :src="items.icon" />
						</view>
						<view class="text-center">
							<text class="e-font-24 c-regular">{{ items.name }}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { getGoodsClassifyTwo, getStoreGrouping } from '@/common/request/api';
import type { ClassifyItem } from '@/common/request/api';
import type { PickPromise } from '@/typings';

const props = defineProps<{
	classifyId: number;
}>();

const classifyListMap = ref<Map<number, ClassifyItem[]>>(new Map([]));
const twoClassifyList = ref<ClassifyItem[]>([]);

const getClassifyChild = async (id: number | string) => {
	let res: PickPromise<ReturnType<typeof getGoodsClassifyTwo>>;
	// #ifndef PRIVATE
	res = await getGoodsClassifyTwo(id);
	// #endif
	// #ifdef PRIVATE
	res = await getStoreGrouping({
		storeId: uni.getStorageSync('storeId'),
		pid: id
	});
	// #endif
	return res.data;
};
const hasLoading = ref(false)
watch(
	() => props.classifyId,
	(v) => {
		if (classifyListMap.value.has(v)) {
			twoClassifyList.value = classifyListMap.value.get(v)!;
		} else {
			hasLoading.value = true
			getClassifyChild(v).then(async (res) => {
				for (let item of res) {
					item.children = await getClassifyChild(item.id);
				}
				classifyListMap.value.set(v, res);
				twoClassifyList.value = res;
			}).finally(() => {
				hasLoading.value = false
			})
		}
	}
);
</script>

<style lang="scss" scoped>
@include appBem_b(classify-page-two-classify-list) {
	height: 100%;
	overflow:hidden;
	padding: 20rpx 20rpx 0 0;
	scroll-view {
		height: 100%;
	}
	@include appBem_e(item) {
		padding: 24rpx 30rpx 30rpx 30rpx;
		&-child{
			margin-right:30rpx;
			&:nth-child(3){
				margin:0
			}
		}
	}
	@include appBem_e(skeleton-title) {
		width: 120rpx;
		height: 40rpx;
	}
	@include appBem_e(skeleton-img) {
		width: 142rpx;
		height: 142rpx;
	}
	@include appBem_e(skeleton-txt) {
		width: 80rpx;
		height: 36rpx;
	}
}
</style>
